<template>
	<view class="box">
		<view class="headBtn">
			<u-button @click="toOrder()">我的预约</u-button>
		</view>
		<view class="head">
			<view class="searchHead">
				<u-icon name="search" size="45" color="gray"></u-icon>
				<view class="searchInput">
					<u-input class="uvInput" v-model="value" type="text" :border="false" placeholder="请输入礼品/店铺名称进行搜索" />
					<view>
						<u-icon name="mic" size="45" color="lightgray"></u-icon>
						<text>|</text>
						<u-icon name="camera" size="45" color="lightgray"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="choose">
			<text>服务选择</text>
			<text>精选店铺</text>
		</view>
		<view class="part">
			<view class="partcontent">
				<view>
					<text style="font-size: 34rpx;font-weight: bold;">家政服务</text>
					<text style="font-size: 24rpx;padding-top: 5%;">最贴心服务</text>
				</view>
				<image
					src='https://s1.ax1x.com/2023/03/23/ppw9OHJ.png'>
				</image>
			</view>
			<view class="partcontent">
				<view>
					<text style="font-size: 34rpx;font-weight: bold;">定制餐饮</text>
					<text style="font-size: 24rpx;padding-top: 5%;">营养丰富</text>
				</view>
				<image
					src="https://s1.ax1x.com/2023/03/23/ppwCS9x.png">
				</image>
			</view>
			<view class="partcontent" @click="toMassage">
				<view>
					<text style="font-size: 34rpx;font-weight: bold;">上门按摩</text>
					<text style="font-size: 24rpx;padding-top: 5%;">舒活筋骨</text>
				</view>
				<image
					src="https://s1.ax1x.com/2023/03/23/ppwCCjO.png">
				</image>
			</view>
			<view class="partcontent">
				<view>
					<text style="font-size: 34rpx;font-weight: bold;">暖心陪伴</text>
					<text style="font-size: 24rpx;padding-top: 5%;">给您温暖</text>
				</view>
				<image
					src="https://s1.ax1x.com/2023/03/23/ppwCkHH.png">
				</image>
			</view>
			<view class="partcontent">
				<view>
					<text style="font-size: 34rpx;font-weight: bold;">热线求助</text>
					<text style="font-size: 24rpx;padding-top: 5%;">在线服务</text>
				</view>
				<image
					src="https://s1.ax1x.com/2023/03/23/ppwCEEd.png">
				</image>
			</view>
			<view class="partcontent" @click="toSubscribe">
				<view>
					<text style="font-size: 34rpx;font-weight: bold;">体检预约</text>
					<text style="font-size: 24rpx;padding-top: 5%;">体检重要</text>
				</view>
				<image
					src="https://s1.ax1x.com/2023/03/23/ppwCn8P.png">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toOrder() {
				uni.navigateTo({
					url: '/pages/tabbar/reserve/order'
				})
			},
			toMassage() {
				uni.navigateTo({
					url: '/pages/tabbar/reserve/massage'
				})
			},
			toSubscribe() {
				uni.navigateTo({
					url: '/pages/tabbar/reserve/subscribe'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100vh;
		background-color: white;

		.headBtn {
			width: 100%;
			height: 5%;
			background-color: #ff9900;
		}

		.head {
			width: 100%;
			height: 6vh;
			background-color: #ff9900;

			.searchHead {
				width: 90%;
				height: 100%;
				margin: auto;
				display: flex;

				.searchInput {
					background-color: white;
					width: 85%;
					margin-left: 4%;
					height: 90%;
					margin-top: 1%;
					display: flex;

					.uvInput {
						background-color: white;
						width: 70%;
						padding-left: 2%;
					}

					view {
						display: flex;
						padding-left: 10%;

						text {
							padding-top: 4%;
							font-size: 40rpx;
							color: lightgray;
						}
					}
				}
			}
		}

		.choose {
			display: flex;
			width: 100%;
			padding-left: 20%;
			padding-right: 20%;
			justify-content: space-between;
			height: 80rpx;
			border-bottom: 0.5pt solid rgba(144, 144, 144, 0.25);
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

			text {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
			}
		}

		.part {
			display: flex;
			width: 100%;
			height: 70%;
			flex-wrap: wrap;
			padding: 30rpx;
			justify-content: space-between;
			align-content: flex-start;

			.partcontent {
				width: 47%;
				height: 25%;
				background-color: #eeeeee;
				margin-top: 30rpx;
				display: flex;
				border-radius: 10rpx;

				view {
					display: flex;
					flex-direction: column;
					padding-top: 15%;
					padding-left: 5%;
				}

				image {
					width: 35%;
					height: 110rpx;
					border-radius: 50%;
					margin-left: 14%;
					margin-top: 15%;
				}
			}
		}
	}
</style>
<style lang="scss" scoped>
	::v-deep button.u-btn--default {
		width: 20%;
		height: 60rpx;
		margin-left: 75%;
	}
</style>
